<comment th:remove="all"> <!-- This component represents a list grid toolbar -->
</comment>

<div class="listgrid-header-wrapper">
	<table class="list-grid-table twelve table-hover"
		th:classappend="${listGrid.className}"
		th:attr="data-listgridtype=${listGrid.listGridType},
                    data-currenturl=${currentUrl},
                    data-path=@{${listGrid.path}},
                    data-currentparams=${currentParams}"
		blc_admin:component_id="${listGrid}">
		<thead>
			<tr>
				<th th:if="${listGrid.sectionKey == 'product' and checkbox=='true'}" th:text="选择"
					width="40px">选择</th>
				<th th:each="headerField : ${listGrid.headerFields}"
					th:inline="text"
					th:classappend="${#strings.isEmpty(headerField.columnWidth) ? '' : 'explicit-size'}"
					th:attr="data-columnwidth=${#strings.isEmpty(headerField.columnWidth) ? '' : headerField.columnWidth}"
					th:style="${(#strings.isEmpty(headerField.columnWidth) ? '' : 'width: '+headerField.columnWidth+';') 
                              + ' ' + 
                              (headerFieldStat.first ? 'padding-right: 20px;' : '')}"
					scope="col"><span th:if="${headerFieldStat.first}"
					class="listgrid-icon" />

					<div class="listgrid-headerBtn split dropdown"
						th:unless="${listGrid.canFilterAndSort and !headerField.filterSortDisabled}">
						<div class="listgrid-title">
							<span th:remove="tag"
								th:if="${#strings.isEmpty(headerField.friendlyName)}"
								th:text="#{${headerField.name}}" /> <span th:remove="tag"
								th:unless="${#strings.isEmpty(headerField.friendlyName)}"
								th:text="#{${headerField.friendlyName}}" />
						</div>
						<div class="resizer" th:unless="${headerField.resizeDisabled}">||</div>
					</div>

					<div href="#" class="listgrid-headerBtn split dropdown"
						th:if="${listGrid.canFilterAndSort and !headerField.filterSortDisabled}">
						<div class="listgrid-title">
							<span th:remove="tag"
								th:if="${#strings.isEmpty(headerField.friendlyName)}"
								th:text="#{${headerField.name}}" /> <span th:remove="tag"
								th:unless="${#strings.isEmpty(headerField.friendlyName)}"
								th:text="#{${headerField.friendlyName}}" />
							<div class="listgrid-filter-sort-container">
								<i class="sort-icon icon-sort"></i> <i
									class="filter-icon icon-filter"></i>
							</div>
						</div>

						<div class="resizer" th:unless="${headerField.resizeDisabled}">||</div>
						<ul th:include="${'components/partials/listGridHeaderFilter'}"
							class="no-hover"
							th:classappend="${headerField.mainEntityLink ? 'first' : ''}"
							th:with="fieldType=${headerField.fieldType},
                                     fieldName=${headerField.name},
                                     fieldFriendlyName=${headerField.friendlyName},
                                     index=${headerFieldStat.index}">
						</ul>
					</div></th>

				<th width="75"
					th:unless="${listGrid.hideIdColumn or !#props.forceShowIdColumns}">
					<div class="listgrid-headerBtn split dropdown"
						th:unless="${listGrid.canFilterAndSort}">
						<div class="listgrid-title">Id</div>
					</div>

					<div class="listgrid-headerBtn split dropdown"
						th:if="${listGrid.canFilterAndSort}">
						<div class="listgrid-title">
							Id
							<div class="listgrid-filter-sort-container">
								<i class="sort-icon icon-sort"></i> <i
									class="filter-icon icon-filter"></i>
							</div>
						</div>

						<div class="resizer" th:unless="${headerField?.resizeDisabled}">||</div>
						<ul th:include="${'components/partials/listGridHeaderFilter'}"
							class="no-hover end"
							th:with="fieldType=${'id'},
                                     fieldName=${listGrid.idProperty},
                                     fieldFriendlyName=${listGrid.idProperty},
                                     index=${#lists.size(listGrid.headerFields) - 1}">
						</ul>
					</div>
				</th>
			</tr>
		</thead>
		<tbody
			th:attr="data-recordranges=${listGrid.startIndex + '-' + (listGrid.startIndex + #lists.size(listGrid.records) - 1)},
                        data-totalrecords=${listGrid.totalRecords},
                        data-pagesize=${listGrid.pageSize}">

			<tr th:if="${#lists.isEmpty(listGrid.records)}">
				<td th:colspan="${#lists.size(listGrid.headerFields) + 1}"
					class="list-grid-no-results">(No records found)</td>
			</tr>

			<tr th:each="record : ${listGrid.records}"
				th:unless="${#lists.isEmpty(listGrid.records)}"
				th:class="${record.isDirty? 'dirty' : record.isError? 'error' : ''}"
				th:classappend="${listGrid.clickable}? 'clickable'"
				th:attr="data-link=@{${record.path}},
                         data-index=${record.index},
                         data-rowid=${record.id},
                         data-hiddenfields=${record.getHiddenFieldsJson()}">
				<td th:if="${listGrid.sectionKey == 'product' and checkbox=='true'}" width="40px" class="selected-product"><input
					type="checkbox" /></td>
				<td th:each="headerField : ${record.listGrid.headerFields}"
					th:switch="${listGrid.listGridType}"
					th:with="field=${record.getField(headerField.name)}"
					th:attr="data-fieldname=${field.name},data-fieldvalue=${field.value}"
					th:class="${field.isDerived ? 'derived' : ''}"><span
					th:case="'main'" th:remove="tag"> <span
						th:substituteby="components/partials/listGridIcon" /> <a
						th:if="${headerField.mainEntityLink}" th:href="@{${record.path}}"
						th:text="${#strings.isEmpty(field.displayValue) ? '(No value set)' : field.displayValue}" />

						<span
						th:if="${headerField.canLinkToExternalEntity and !#strings.isEmpty(field.value)}"
						th:remove="tag"> <span th:remove="tag"
							th:text="${field.displayValue}" /> <a
							th:href="@{${headerField.foreignKeyClass + '/' + field.value}}"
							class="modal-view"> <i class="icon-external-link"></i>
						</a>
					</span> <span th:if="${field.fieldType == 'IMAGE'}"> <img
							class="thumbnail" th:style="${'height: ' + field.height + 'px;'}"
							th:src="@{${field.value + record.getField('thumbnailKey').value}}"
							th:attr="data-fullurl=@{${field.value}}" />
					</span> <span th:if="${field.fieldType == 'COLOR'}"> <span
							class="sandbox-color-square"
							th:style="${'background-color: ' + field.value + ';'}" />
					</span> <span
						th:unless="${headerField.mainEntityLink 
                                or headerField.canLinkToExternalEntity 
                                or field.fieldType == 'IMAGE'
                                or field.fieldType == 'COLOR'}"
						th:text="${field.displayValue}" th:remove="tag" />
				</span> <span th:case="*" th:remove="tag"> <span
						th:substituteby="components/partials/listGridIcon" /> <span
						th:if="${headerField.canLinkToExternalEntity}" th:remove="tag">
							<span th:remove="tag" th:text="${field.displayValue}" />
					</span> <span
						th:if="${headerField.mainEntityLink and record.canLinkToExternalEntity}"
						th:remove="tag"> <span th:remove="tag"
							th:text="${field.displayValue}" /> <a
							th:href="@{${record.externalEntityPath}}" class="modal-view">
								<i class="icon-external-link"></i>
						</a>
					</span> <span th:if="${field.fieldType == 'IMAGE'}"> <img
							class="thumbnail" th:style="${'height: ' + field.height + 'px;'}"
							th:src="@{${field.value + record.getField('thumbnailKey').value}}"
							th:attr="data-fullurl=@{${field.value}}" />
					</span> <span th:if="${field.fieldType == 'COLOR'}"> <span
							class="sandbox-color-square"
							th:style="${'background-color: ' + field.value + ';'}" />
					</span> <span
						th:unless="${(headerField.mainEntityLink and record.canLinkToExternalEntity)
                                or headerField.canLinkToExternalEntity
                                or field.fieldType == 'IMAGE'
                                or field.fieldType == 'COLOR'}"
						th:remove="tag" th:text="${field.displayValue}" />
				</span></td>

				<td
					th:unless="${listGrid.hideIdColumn or !#props.forceShowIdColumns}"
					data-fieldname="id" th:text="${record.id}"
					th:attr="data-fieldvalue=${record.id}" />
			</tr>

		</tbody>
	</table>
</div>
<span class="listgrid-table-footer" th:inline="text"> <span
	class="listgrid-table-footer-message" th:inline="text"> <span
		class="low-index" th:if="${records}"
		th:text="${listGrid.startIndex + 1}" /> <span class="low-index"
		th:unless="${records}">0</span> - <span class="high-index"
		th:text="${listGrid.startIndex + #lists.size(listGrid.records)}" /> <span
		th:text="${'of'}" /> <span class="total-records"
		th:text="${#lists.size(listGrid.records)}" /> <span
		th:text="${'records'}" />
</span>
</span>
<span class="listgrid-table-spinner-container" th:inline="text">
	<i class="listgrid-table-spinner icon-spin icon-spinner" />
</span>
